<template>
	<view class="page-container">
		<!-- 顶部用户信息区域 -->
		<UserInfoHeader :is-mine="true" @userInfoClick="handleUserInfoClick"/>

		<!-- 常用功能区域 -->
		<view class="common-functions-section">
			<view class="section-title">常用功能</view>
			<view class="functions-grid">
				<view v-for="(item, index) in commonFunctions" :key="index" class="function-item" @click="handleFunctionClick(item)">
					<u--image v-if="item.iconSrc" :src="baseURL+item.iconSrc" width="56rpx" height="56rpx" radius="16rpx"></u--image>
					<view v-else class="function-icon" :class="'tool-' + (index + 1)"></view>
					<view class="function-name">{{item.name}}</view>
				</view>
			</view>
		</view>

		<!-- 更多功能区域 -->
		<view class="more-functions-section">
			<view class="section-title">更多功能</view>
			<view class="functions-grid">
				<view v-for="(item, index) in moreFunctions" :key="index" class="function-item" @click="handleFunctionClick(item)">
					<u--image v-if="item.iconSrc" :src="baseURL+item.iconSrc" width="56rpx" height="56rpx" radius="16rpx"></u--image>
					<view v-else class="function-icon" :class="'tool-' + (index + 5)"></view>
					<view class="function-name">{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex'
import UserInfoHeader from '../../components/UserInfoHeader.vue';

export default {
	components: {
		UserInfoHeader,
	},
	computed: {
		...mapGetters(['baseURL']),
	},
	data() {
		return {
			commonFunctions: [
				{ name: '互医管理', iconSrc: '/img/personalCenter/20250903034749465---mutuaMedicineManage-icon.png', path: 'interHospital' },
				{ name: '健康宣教', iconSrc: '/img/personalCenter/20250903034806566---healthEducation-icon.png', path: 'healthEducation' },
				{ name: '常用语', iconSrc: '/img/personalCenter/20250903034823933---commonPhrases-icon.png', path: 'commonPhrases' },
				{ name: '我的排班', iconSrc: '/img/personalCenter/20250903034836158---mySchedule-icon.png', path: 'mySchedule' }
			],
			moreFunctions: [
				{ name: '我的粉丝', iconSrc: '/img/personalCenter/20250903040313226---myFans-icon.png', path: 'myFans' },
				{ name: '黑名单', iconSrc: '/img/personalCenter/20250903040417260---blacklist-icon.png', path: 'blacklist' },
				{ name: '我的收藏', iconSrc: '/img/personalCenter/20250903040439303---myFavorites-icon.png', path: 'myFavorites' },
				{ name: '密码设置', iconSrc: '/img/personalCenter/20250903040452231---passwordSetting-icon.png', path: 'passwordSettings' },
				{ name: '我的锦旗', iconSrc: '/img/personalCenter/20250903040503674---myBanners-icon.png', path: 'myBanners' },
				{ name: '反馈', iconSrc: '/img/personalCenter/20250903040513703---feedbacks-icon.png', path: 'feedback' },
				{ name: '我的评价', iconSrc: '/img/personalCenter/20250903040529241---myAssessment-icon.png', path: 'myReviews' }
			]
		}
	},
	mounted() {
	},
	methods: {
		handleFunctionClick(item) {
			console.log('点击功能:', item.name, item.path)
			// 这里可以根据path跳转到对应页面
			uni.showToast({
				title: `点击了${item.name}`,
				icon: 'none'
			})
		},
		handleUserInfoClick() {
			uni.navigateTo({
				url: '/pages/user/personalInfo/PersonalInfo'
			})
		}
	}
}
</script>

<style lang='scss' scoped>
.page-container {
	padding: 32rpx;
}

/* 用户信息区域 */
.user-info-section {
	display: flex;
	align-items: center;
	margin-bottom: 48rpx;
	padding: 32rpx;
	background: white;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.avatar-container {
	width: 120rpx;
	height: 120rpx;
	overflow: hidden;
	margin-right: 32rpx;
}

.avatar-image {
	width: 100%;
	height: 100%;
	border-radius: 60rpx;
}

.user-details {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
}

.user-name {
	font-size: 36rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 12rpx;
}

.user-title {
	font-size: 28rpx;
	color: #666;
}

/* 功能区域 */
.common-functions-section {
	background: white;
	border-radius: 24rpx;
	padding: 24rpx 32rpx 36rpx;
	margin-bottom: 60rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.more-functions-section {
	margin-bottom: 60rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: 400;
	color: #333;
	margin-bottom: 36rpx;
	position: relative;
}

.section-title::after {
	content: '';
	position: absolute;
	bottom: -8rpx;
	left: 0;
	width: 44rpx;
	height: 8rpx;
	background: linear-gradient(90deg, #41CFE6 0%, #14A5FF 100%);
	border-radius: 414rpx;
}

.functions-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 44rpx;
}

.function-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
}

.function-icon {
	width: 56rpx;
	height: 56rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.icon-text {
	font-size: 32rpx;
}

/* 常用功能图标颜色 */
.icon-1 {
	background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
}

.icon-2 {
	background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
}

.icon-3 {
	background: linear-gradient(135deg, #FF5722 0%, #D32F2F 100%);
}

.icon-4 {
	background: linear-gradient(135deg, #00BCD4 0%, #0097A7 100%);
}

/* 更多功能图标颜色 */
.icon-5 {
	background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
}

.icon-6 {
	background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
}

.icon-7 {
	background: linear-gradient(135deg, #FFC107 0%, #FF8F00 100%);
}

.icon-8 {
	background: linear-gradient(135deg, #607D8B 0%, #455A64 100%);
}

.icon-9 {
	background: linear-gradient(135deg, #E91E63 0%, #C2185B 100%);
}

.icon-10 {
	background: linear-gradient(135deg, #795548 0%, #5D4037 100%);
}

.icon-11 {
	background: linear-gradient(135deg, #3F51B5 0%, #303F9F 100%);
}

.function-name {
	font-size: 24rpx;
	color: #000;
	text-align: center;
	line-height: 24rpx;
}
</style>
